<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        #demo{
            width: 100px;
            height: 100px;
            background-color: #6ff;
            margin: 50px;
        }
    </style>
</head>
<body>
    <!-- disabled="disabled" 表单元素是否默认禁用    => 控制是否禁用 inp.disabled = true / falses -->
    <input type="text" disabled="disabled">
    <video src="" controls="controls" autoplay loop muted></video>

    <div id="app">
        <!-- <p>{{msg}}</p>
        <p v-text="msg"></p> -->
            
        <!-- 静态属性id='idName'  => 不生效 -->
        <p id="idName"></p>

        <!-- 有时我们希望将data中绑定的数据作为 标签内属性的属性值,怎么办 -->
        <!-- <p id="{{idName}}" class="{{className}}"></p> 不允许直接在标签的<>内使用文本插值  ->  使用v-bind指令代码 -->
        <!-- v-bind 动态绑定属性 将data中绑定的数据作为标签内某个属性(根据参数来定)的属性值  -->
        <p  
          v-bind:id="idName" 
          v-bind:class="className" 
          v-bind:title="title"
          v-bind:data-id="num"
        ></p>

        <p  
          v-bind:id="idName" 
          v-bind:class="a"
          v-bind:title="b"
          v-bind:data-arr="arr"
          v-bind:data-obj="obj"
        >
            <input type="text" v-bind:disabled="bool">
        </p>


        <p>
            <a v-bind:href="href">
                <img v-bind:src="src" width="200px" alt="">
            </a>

        </p>


        <hr>
        <!-- <p>{{msg}}</p>
        <p v-text="msg"></p> -->
            
        <!-- 静态属性id='idName'  => 不生效 -->
        <p id="idName"></p>

        <!-- 有时我们希望将data中绑定的数据作为 标签内属性的属性值,怎么办 -->
        <!-- <p id="{{idName}}" class="{{className}}"></p> 不允许直接在标签的<>内使用文本插值  ->  使用v-bind指令代码 -->
        <!-- v-bind 动态绑定属性 将data中绑定的数据作为标签内某个属性(根据参数来定)的属性值  -->
        <p  
          :id="idName" 
          :class="className" 
          :title="title"
          :data-id="num"
        ></p>

        <p  
          :id="idName" 
          :class="a"
          :title="b"
          :data-arr="arr"
          :data-obj="obj"
        >
            <input type="text" :disabled="bool">
        </p>
        <p>
            <a :href="href">
                <img :src="src" width="200px" alt="">
            </a>
        </p>

    </div>
</body>
<script>
    // 指令: (vue在标签对设置的自定义属性 属性名(指令名称)统一 v-xxx)
    // 指令 (Directives) 是带有 v- 前缀的特殊属性(attribute),指令属性( attribute)的值预期是单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM


    // 注意: 指令属性( attribute)的值预期是单个 JavaScript 表达式  => 将表达式的执行结果作为指令的最终结果

    
    // 指令的用法格式1: 
    // v-指令名称="指令值"

    // v-html: 根据指令的值设置元素的html结构(html结构包含标签和文本  -> v-html也可以只设置文本)
    // v-text: 根据指令的值设置元素的文本结构(文本   如果设置html结构会原样输出)
    // v-pre:  禁用文本插值{{xxx}},此时文本插值会不在生效,作为原样输出 {{ }} 

    // 指令的用法格式2: 
    // v-指令名称:参数 ="指令值"

    // v-bind 动态绑定属性 将data中绑定的数据作为标签内某个属性(根据参数来定)的属性值  
    // v-bind动态绑定属性 => 一般情况下,指令的值是字符串类型(如果不是隐式转化为字符串),但是如果指令的值null和undefined 将不会绑定该属性  true/false 一般常用于表示表单元素的状态 (disabled required checked  multiple hidden ),视频音频(autoplay )

    // 注意: v-bind可以简写  => 省略v-bind
    //  v-bind:href="href"  => :href="href"


    var vm = new Vue({
        el:"#app",
        data:{
            msg:"hello world",
            idName:"demo",
            className:"one",
            title:"hello",
            num:10,
            bool:true,
            a:null,
            b:undefined,
            arr:[1,2,3],
            obj:{a:1,b:2,c:3},

            href:"https://www.jd.com",
            src:"https://img11.360buyimg.com/pop/s1180x940_jfs/t1/147555/7/28947/50083/63edc924Fe779c03b/9e4414b596ad315d.jpg.avif"
        },
    })







    
</script>
</html>